<template>
<!--    用户信息页  当user存在的时候，才显示这些信息，否则不显示-->
    <template v-if="user">

    <!--    cell组件-->
    <van-cell title="昵称" is-link to="/user/edit" :value="user.username" @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="账号" :value="user.userAccount"/>
    <van-cell title="头像" is-link to="/user/edit" @click="toEdit('avatarUrl','头像',user.avatarUrl)">
        <img style="height: 48px" :src="user.avatarUrl"/>
    </van-cell>
    <!--@click触发当点击时触发的方法 -->
    <van-cell :value="user.gender===0? '男':'女'" center is-link title="性别"
                  @click="showGenderEdit=true"/>
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone"  @click="toEdit('phone','电话',user.phone)"/>
    <van-cell title="邮箱" is-link to="/user/edit" :value="user.email"  @click="toEdit('email','邮箱',user.email)"/>
    <van-cell title="修改标签" is-link to="/user/editTags"  @click="toEdit('tags','用户标签',user.tags)"/>
    <van-cell title="星球编号" :value="user.planetCode"/>
    <van-cell title="注册时间" :value="user.createTime"/>
        <van-dialog v-model:show="showGenderEdit" show-cancel-button title="性别" @confirm="doEditGender()">
            <van-row justify="center">
                <van-radio-group v-model="gender" direction="horizontal">
                    <van-radio name="0">男</van-radio>
                    <van-radio name="1">女</van-radio>
                </van-radio-group>
            </van-row>
        </van-dialog>

    </template>


</template>

<script setup lang="ts">
    import {ref,onMounted} from "vue";
    import {useRouter} from "vue-router";
    import myAxios from "../plugin/myAxios";
    import Toast from "@vant/weapp/lib/toast/toast";
    import {showToast} from "vant/lib/vant.es";
    import {getCurrentUser} from "../services/user";

    //    定义一个假数据
    // const user = {
    //     id: 1,
    //     username: '鱼皮',
    //     userAccount: 'dogYupi',
    //     avatarUrl: 'https://cn.bing.com/',
    //     gender: '男',
    //     phone: '13366',
    //     email: '13366',
    //     planetCode: '13366',
    //     createTime: new Date(),
    // }

    //声明当前用户
    const user = ref();

    const showGenderEdit = ref(false);

    const gender = ref();


    //向后端获取当前登录用户信息,
    onMounted(async () =>{
     const res = await getCurrentUser();
     user.value = await getCurrentUser();
     gender.value = user.value.gender + '';
        if (res){
            //如果存在就给当前页面的user进行赋值
            user.value = res;

            showToast('获取当前用户成功');
        }else {
            // Toast.fail('获取当前用户失败');
            console.log('获取当前用户失败');
        }
    })
    //更新性别
    const doEditGender = async () => {
        const res = await myAxios.post("/user/update", {
            'id': user.value.id,
            'gender': gender.value,
        })
        if (res.code === 0 && res.data > 0) {
            showToast("修改成功！");
            window.location.reload();
        } else {
            Toast.fail("更新失败！");
        }
    }


    const router = useRouter();
    //    当点击个人信息页某一项内容时，跳转的方法，query表示携带的参数
    const toEdit = (editKey: string,editName: string, currentValue: string) => {
        if (editKey === 'tags') {
            if (currentValue == null) {
                currentValue = '[]';
            }
            router.push({
                path: '/user/editTags',
                query: {
                    currentValue,
                }
            })
        } else {
            router.push({
                path: '/user/edit',
                query: {
                    //key,名称，value
                    editKey,
                    editName,
                    currentValue,
                }
            })
        }
    }




</script>

<style scoped>

</style>